<!--解决textarea 层级最高问题-->
<template>
         <!-- @focus="focus" -->
    <div class="app">
           <textarea
             v-if="currentIsFocus"
            class="textarea-input"
            :focus="currentIsFocus"
            :auto-height="autoHeight"
            @blur="blur"
            @focus="focus"
            :disabled="disabled"
            @input="changeInput"
            :placeholder="placeholder"
            :maxlength="maxlength"
            @linechange="lineChange"
            :placeholder-class="placeholderClass"
            @confirm="confirm"
            v-model="currentValue">
            </textarea>
        <div
            v-else
            class="textarea-box"
             @click="focus"
            >
            <div
            class="textarea-placeholder"
            v-if="$util.isEmpty(currentValue)">
            {{placeholder}}
            </div>
            <div
            :style="{height:autoHeight?currentHeight:'auto'}"
            class="textarea-dec" v-else>
            {{currentValue}}
            </div>
        </div>
    </div>
</template>

<script>
import { throttle } from '@/utils/common.js'
var throttleFN = throttle()
export default {
	name: 'appTextarea', //
	props: {
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		},
		maxlength: {
			type: Number,
			default: 200
		},
		autoHeight: {
			type: Boolean,
			default: true
		},
		disabled: {
			type: Boolean,
			default: false
		},
		isFocus: {
			type: Boolean,
			default: false
		},
		placeholderClass: {
			type: String,
			default: 'placeholder'
		}
	},
	data() {
		return {
			currentValue: '',
			isBlur: true,
			currentHeight: '',
			currentIsFocus: false
		}
	},
	created() {
		this.currentValue = this.$util.isEmpty(this.value) ? '' : this.value
		this.currentIsFocus = this.isFocus
	},
	methods: {
		blur() {
			this.currentIsFocus = false
			this.$emit('blur')
		},
		focus() {
			this.currentIsFocus = true
			this.$emit('focus')
		},
		changeInput(event) {
			throttleFN(() => this.$emit('input', event.target.value), 20)
		},
		lineChange(val) {
			this.currentHeight = val.detail.height + 'px'
		},
		confirm() {
			this.currentIsFocus = false
		}
	},
	watch: {
		value(val) {
			this.currentValue = val
		},
		currentValue(val) {
			throttleFN(() => this.$emit('input', val), 20)
		},
		isFocus(val) {
			this.currentIsFocus = val
		}
	}
}
</script>

<style lang="scss" scoped>
    .app {
        width: 100%;
        height: 100%;
        line-height: 1;
        display: inline-block;
        & .textarea-input {
            width: 100%;
            min-height: 36px;
            height: 100%;
            font-size:24px;
            color:#4d4d4d;
        }
        & .textarea-box {
            font-size: 0;
            display:flex;
            // position: relative;
            // cursor: auto;
            min-height: 36px;
            height: 120%;
            width: 100%;
            overflow-y: auto;
            align-items:center;
            & .textarea-dec {
                font-size: 24px;
                color:#4d4d4d;
                word-wrap:break-word;
                word-break:break-all;
                white-space: pre-wrap;
                line-height: 33px;
            }
            & .textarea-placeholder {
                display: inline-block;
                font-size: 24px;
                color:#797979;
                vertical-align: middle;

            }
        }
    }
    .placeholder {
        font-size: 28px;
        color:#797979;
    }
</style>
